
/** 订单统计的网络请求 */
async function getTotalData() {
  return new Promise(function(resolve, reject) {
    resolve({
      code: 200,
      data: [
        {
          month: '6月',
          orderCount: 13
        },
        {
          month: '7月',
          orderCount: 28
        },
        {
          month: '8月',
          orderCount: 22
        },
        {
          month: '9月',
          orderCount: 26
        },
        {
          month: '10月',
          orderCount: 24
        },
        {
          month: '11月',
          orderCount: 45
        },
      ],
      msg: ""
    })
  })
}

const WEEK = ['日', '一', '二', '三', '四', '五', '六']

/** 获得日期、时间信息 */ 
function getNowTime() {
  setInterval(() => {
    let timeDom = document.getElementsByClassName('info-time')[0]
    let dateDom = document.getElementsByClassName('info-date')[0]
    let t = new Date()
    timeDom.innerText = `${t.getHours().toString().padStart(2, '0')}:${t.getMinutes().toString().padStart(2, '0')}:${t.getSeconds().toString().padStart(2, '0')}`
    dateDom.innerText = `${t.getFullYear()}-${(t.getMonth()+1).toString().padStart(2, '0')}-${t.getDate().toString().padStart(2, '0')} 星期${WEEK[t.getDay()]}`
  }, 1000)
}

/** 获取图表数据 */
async function queryChartData() {
  let chartBox = echarts.init(document.getElementById("total-canvas"))
  // console.log(chartBox, echarts);
  let options = {}
  let { code, data, msg } = await getTotalData()
  if(code == 200) {
    let xData = []
    let yData = []
    if(data) {
      data.map(e => {
        xData.push(e.month)
        yData.push(e.orderCount)
      })
    }
    options = {
      grid: {
        top: 32,
        bottom: 32,
        right: 50
      },
      xAxis: {
        // name: '月份',
        data: xData,
        axisTick: {
          show: false
        },
        axisLine: {
          lineStyle: {
            width: 3,
            color: '#3C6579'
          }
        },
        axisLabel: {
          color: '#A2B0B8'
        },
        splitLine: {
          show: false
        }
      },
      yAxis: {
        // name: '订单数',
        axisLabel: {
          color: '#A2B0B8'
        },
        splitLine: {
          lineStyle: {
            color: '#2C3441',
            type: 'dashed',
            dashOffset: 1
          }
        }
      },
      series: [{
        name: '订单数',
        type: 'bar',
        data: yData,
        barMaxWidth: 26,
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(255, 255, 255, 0.1)',
          borderColor: 'rgba(39, 220, 255, 0.2)',
          borderWidth: 3,
          borderType: 'solid',
        },
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 2,
          borderType: 'solid',
          normal: {
            color: function(params) {
              return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(39, 220, 255, 1)'
                },
                {
                  offset: 1,
                  color: 'rgba(39, 220, 255, 0.1)'
                }
              ], false)
            },
            label: {
                show: true,
                position: "top",
                textStyle: {
                  fontWeight: 700,
                  fontSize: '16',
                  color: '#fff'
                }
            }
          }
        }
      }]
    }
    chartBox.setOption(options)
  }
}

/** 渲染近30天订单模板 */
function getScrollListDom(data) {
  return `<tr class="list-tr text">
    <td>2306-10</td>
    <td>碧桂园悦江府6-2-304范夏佑</td>
    <td>6月10日</td>
    <td>17天</td>
    <td class="${data.sth ? 'text-green' : 'text-red'}">已完成,延期1天</td>
  </tr>`
}

/** 渲染订单列表模板 */
function getOrderListDom(data) {
  return `<tr class="list-tr text list-line-x">
  <td>2306-201</td>
  <td>鑫苑鑫都会10-2-2106</td>
  <td>正常</td>
  <td>6月01日</td>
  <td>6月28日</td>
  <td>83.33%</td>
  <td class="step list-linear-x">
    <div class="step-area">
      <div class="step-main">
      ${getProcessDom(data.sth)}
      </div>
      <div class="tag-area">
        <div class="tag tag-red">延期</div>
      </div>
    </div>
  </td>
</tr>`
}

/** 获取进度模板 */
function getProcessDom(data) {
  // TODO: 遍历生成
  return `<div class="step-item">
    <span class="step-item-white">06-04刘大师</span> 
    <span class="step-item-yellow">开料</span>
  </div>`
}

/** 列表自动滚动 */
function autoScrollList() {
  let listDom = document.getElementById("scroll-area")
  let scrollTimer = setInterval(() => {
    // 滚动高度大于大于元素高度时
    if(listDom.scrollTop >= listDom.clientHeight) {
      listDom.scrollTop = 0
      // TODO: 清除定时器，重新请求数据，递归
      // clearInterval(scrollTimer)
    } else {
      listDom.scrollTop += 5
    }
  }, 500)
}

/** 订单表格自动翻页 */
function autoPageList() {
  // setInterval(() => {
    // TODO: 在定时器中获取数据，处理模板

  // }, 20000)
}

/** 其他数据定时更新 */
function updateData() {
  // TODO: 更新左侧数量、底部图表和统计数量
  // 获取元素更新内容
}

window.onload = function() {
  getNowTime()
  queryChartData()
  autoScrollList()
  autoPageList()
  updateData()
}